<template>
  <div class="df fdc jcc notice-outer">
    <p class="hh-64 boxs pdl-32 fl-center pointer" @click="$router.push('/system/notice')">
      <icon-font type="icon-arrowleft"></icon-font>
      <span class="pdl-8">返回</span>
    </p>
    <div class="pdl-32" style="width: 560px">
      <p class="pdt-24 pdb-22 fs-18 font333 bold">{{
        $route.query.id ? '编辑公告' : '添加公告'
      }}</p>
      <a-form ref="formRef" :model="modelRef" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-item label="公告等级" :rules="rules.type" name="type">
          <a-select v-model:value="modelRef.type" placeholder="请选择">
            <a-select-option :value="1">系统维护</a-select-option>
            <a-select-option :value="2">消息通知</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="状态" :rules="rules.status" name="status">
          <div class="df aic">
            <a-switch v-model:checked="modelRef.status" />
            <span class="ml-16 font999">开启状态时，提交之后立刻发送公告信息</span>
          </div>
          <!-- <a-switch :checked="record.enable === 1" @change="statusChange($event, record)" /> -->
        </a-form-item>
        <a-form-item label="可查看角色" :rules="rules.role" name="role">
          <a-select v-model:value="modelRef.role" mode="multiple" placeholder="请选择">
            <a-select-option :value="1">超级管理员</a-select-option>
            <a-select-option :value="2">校级领导</a-select-option>
            <a-select-option :value="3">督导组长</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="公告信息" :rules="rules.detailmsg" name="detailmsg">
          <a-textarea rows="8" v-model:value="modelRef.detailmsg" placeholder="请输入" />
        </a-form-item>
      </a-form>
    </div>
    <div class="mta notice-bottom df jcc pdt-16">
      <a-button class="mr-24" @click="$router.push('/system/notice')">取消</a-button>
      <a-button type="primary" :loading="confirmLoading" @click="submit">确定</a-button>
    </div>
  </div>
</template>
<script lang="ts">
  import { defineComponent, reactive, toRefs, ref, onMounted } from 'vue'
  import { DynamicTable, TableQueryHeader } from '@/components/dynamic-table'
  import { useRouter, useRoute } from 'vue-router'
  import { useStore } from '@/store'
  import iconFont from '@/components/iconfont/icon-font'
  import { postUpdateNotice, postAddNotice } from '@/api/system/index'

  export default defineComponent({
    name: 'Markcomponent',
    components: {
      iconFont,
    },
    setup() {
      const tableRef = ref<InstanceType<typeof DynamicTable>>()

      const formRef = ref<any>(null)

      const router = useRouter()

      const route = useRoute()

      const store = useStore()

      const state = reactive({
        confirmLoading: false,
      })

      const modelRef = reactive({
        type: null,
        status: false,
        detailmsg: null,
        role: [],
      })

      const rules = {
        type: [
          {
            required: true,
            message: '请选择公告类型',
          },
        ],
        status: [
          {
            required: true,
            message: '请选择状态',
          },
        ],
        role: [
          {
            required: true,
            message: '请选择角色',
          },
        ],
        detailmsg: [
          {
            required: true,
            message: '请输入公告信息',
          },
        ],
      }

      /**
       * @description 加载表格数据
       */

      onMounted(async () => {
        // formRef.value.validate()
      })

      const submit = async () => {
        // $router.push('/system/notice')
        state.confirmLoading = true
        try {
          await formRef.value.validate()
          const params = { ...modelRef }
          const id = route.query.id
          console.log(params)
          await (id
            ? postUpdateNotice(Object.assign(params, { id: id }))
            : postAddNotice(params)
          ).finally(() => (state.confirmLoading = false))
          router.push('/system/notice')
        } catch (error) {
          console.log('error', error)
          state.confirmLoading = false
        }
      }

      return {
        ...toRefs(state),
        tableRef,
        formRef,
        labelCol: { span: 4 },
        wrapperCol: { span: 20 },
        modelRef,
        rules,
        submit,
      }
    },
  })
</script>
<style lang="scss" scoped>
  .notice-outer {
    height: 100%;
  }

  .notice-bottom {
    height: 80px;
    background: #ffffff;
    box-shadow: 0px -4px 8px rgba(0, 0, 0, 0.05);
  }
</style>
